<template>
  <div>
    <p>Lyric</p>
    <button @click="playMusic">play</button>
    <audio
      :src="
        'https://music.163.com/song/media/outer/url?id=' +
        $route.params.id +
        '.mp3'
      "
      ref="audio"
    ></audio>
    <div class="content">
      <div class="lyrics" :style="{transform: 'translateY('+num+'px)'}">
        <p
          v-for="(item, key, index) in lyrics"
          :key="index"
        >{{item}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lyrics: {},
      num: 0
    };
  },
  created() {
    this.getLyric(this.$route.params.id);
  },
  methods: {
    getLyric(id) {
      this.$http("/lyric?id=" + id).then((res) => {
        let lrc = res.data.lrc.lyric;
        this.lyrics = this.transLrc(lrc);
      });
    },
    transLrc(lrc) {
      let obj = {};
      let reg = /\[(.*)](.*)/g;
      lrc.replace(reg, (a, b, c) => {
        console.log(111,a);
        console.log(222,b);
        console.log(333,b);
        b = b.slice(0, 5);
        obj[b] = c;
      });
      return obj;
    },
    playMusic() {
      let audio = this.$refs.audio;
      audio.play();
      audio.ontimeupdate = () => {
        let nowtime = this.tranTime(audio.currentTime);
        if (nowtime in this.lyrics) {
         this.num -= 10
        }
      };
    },
    tranTime(time) {
      let min = (Math.floor(time / 60)+'').padEnd(2, '0');
      let sec = (Math.floor(time % 60)+'').padEnd(2, '0');
      return `${min}:${sec}`
    }
  },
};
</script>

<style>
  .content {
    height: 200px;
    overflow: hidden;
  }
</style>